import { AppConfigService } from '@/service/appconfigservice';
import { Component, inject } from '@angular/core';

@Component({
    standalone: true,
    selector: 'apollo-logo',
    template: `
        <svg width="235" height="40" viewBox="0 0 235 40" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M20.0055 0L0 39.8951H6.7486L20.0064 11.5771L32.9975 39.8951H40.0134L20.0055 0Z" [attr.fill]="fillColor" />
            <path d="M26.4066 30.0791L30.9241 40.0001H22.4536L26.4066 30.0791Z" [attr.fill]="fillColor" />
            <path d="M17.2595 40.0001L12.7419 30.0791L8.78906 40.0001H17.2595Z" [attr.fill]="fillColor" />
            <path d="M78.0429 27.6582H66.3425L63.2979 34.2844H58.855L72.3786 5.28833L85.4243 34.2844H80.9104L78.0429 27.6582ZM76.3613 23.7886L72.3078 14.512L68.0595 23.7886H76.3613Z" [attr.fill]="fillColor" />
            <path
                d="M100.155 23.2053V34.2843H96.0303V7.0022H100.703C102.993 7.0022 104.721 7.16123 105.89 7.47928C107.07 7.79734 108.108 8.39811 109.005 9.2816C110.575 10.813 111.359 12.7449 111.359 15.0773C111.359 17.5746 110.521 19.5536 108.846 21.0143C107.17 22.4751 104.91 23.2053 102.066 23.2053H100.155ZM100.155 19.3887H101.695C105.483 19.3887 107.377 17.9339 107.377 15.0243C107.377 12.2089 105.423 10.8012 101.517 10.8012H100.155V19.3887Z"
                [attr.fill]="fillColor"
            />
            <path
                d="M121.418 20.5197C121.418 16.6795 122.829 13.3811 125.649 10.6246C128.458 7.86811 131.833 6.48987 135.774 6.48987C139.668 6.48987 143.008 7.8799 145.793 10.6599C148.59 13.44 149.988 16.7796 149.988 20.6788C149.988 24.6013 148.584 27.9292 145.775 30.6622C142.955 33.4069 139.55 34.7792 135.562 34.7792C132.033 34.7792 128.865 33.5601 126.056 31.1216C122.964 28.4239 121.418 24.89 121.418 20.5197ZM125.578 20.5727C125.578 23.5882 126.593 26.0681 128.623 28.0117C130.641 29.9554 132.972 30.9271 135.615 30.9271C138.482 30.9271 140.902 29.9377 142.872 27.9586C144.843 25.9561 145.828 23.5176 145.828 20.6433C145.828 17.7337 144.855 15.2953 142.908 13.3281C140.972 11.3491 138.577 10.3596 135.721 10.3596C132.877 10.3596 130.475 11.3491 128.517 13.3281C126.558 15.2835 125.578 17.6984 125.578 20.5727Z"
                [attr.fill]="fillColor"
            />
            <path d="M166.47 7.0022V30.4147H174.507V34.2843H162.346V7.0022H166.47Z" [attr.fill]="fillColor" />
            <path d="M189.715 7.0022V30.4147H197.752V34.2843H185.591V7.0022H189.715Z" [attr.fill]="fillColor" />
            <path
                d="M206.34 20.5197C206.34 16.6795 207.75 13.3811 210.57 10.6246C213.379 7.86811 216.754 6.48987 220.696 6.48987C224.59 6.48987 227.929 7.8799 230.715 10.6599C233.512 13.44 234.911 16.7796 234.911 20.6788C234.911 24.6013 233.506 27.9292 230.698 30.6622C227.876 33.4069 224.472 34.7792 220.484 34.7792C216.954 34.7792 213.787 33.5601 210.979 31.1216C207.886 28.4239 206.34 24.89 206.34 20.5197ZM210.5 20.5727C210.5 23.5882 211.515 26.0681 213.545 28.0117C215.564 29.9554 217.893 30.9271 220.536 30.9271C223.403 30.9271 225.823 29.9377 227.794 27.9586C229.765 25.9561 230.751 23.5176 230.751 20.6433C230.751 17.7337 229.776 15.2953 227.83 13.3281C225.893 11.3491 223.499 10.3596 220.643 10.3596C217.8 10.3596 215.398 11.3491 213.438 13.3281C211.48 15.2835 210.5 17.6984 210.5 20.5727Z"
                [attr.fill]="fillColor"
            />
        </svg>
    `,
    host: {
        class: 'h-8 lg:h-10 [&>svg]:h-full [&>svg]:w-auto select-none'
    }
})
export class ApolloLogo {
    configService = inject(AppConfigService);

    get fillColor() {
        return this.configService.appState().darkTheme ? 'var(--p-surface-900)' : 'var(--p-surface-0)';
    }
}
